<template>
  <div class="order-item flex-xbt flex-yc" v-for="ite in 4" :key="ite">
    <div class="flex-yc">
      <img src="" />
      <div class="tit-wrap">
        <h1>
          这里是产品标题这里是产品标题这里是产品标题产品标题这里是产品标题
        </h1>
        <p>分类：年会员（优惠券十张）</p>
      </div>
    </div>
    <span>¥ 12211.00</span>
    <span>123</span>
    <span>¥ 12211.00</span>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.order-item {
  padding: 16px;
  border-right: 1px solid $borderCol;

  & + .order-item {
    border-top: 1px solid $borderCol;
  }

  img {
    width: 98px;
    height: 98px;
    background-color: #d9d9d9;
    border-radius: 4px;
  }

  .tit-wrap {
    width: 402px;
    padding-left: 25px;

    h1 {
      margin-bottom: 12px;
      font-size: 16px;
      font-weight: 500;
      line-height: 19px;
      color: rgb(4 7 36 / 85%);
    }

    p {
      color: rgb(4 7 36 / 45%);
    }
  }

  span {
    width: 180px;
    text-align: center;
  }
}
</style>
